<template>
  <div>
    <!-- 通过props传递回调 -->
    <SchoolVue id="s1" :backSchoolName="getSchoolName"></SchoolVue>
    <!-- 通过ref绑定自定义事件 -->
    <SchoolVue id="s2" ref="s2" :backSchoolName="getSchoolName"></SchoolVue>
    <!-- 通过标签属性绑定自定义事件 -->
    <!-- <StudentVue id="stu1" @getStudentName="getStudentName" @getStudentAge="getStudentAge">
    </StudentVue> -->
    <StudentVue ref="stu1" id="stu1" @click.native.once.stop.passive="studentVCclick">
    </StudentVue>
  </div>

</template>

<script>
import SchoolVue from './components/School.vue'

import StudentVue from './components/Student.vue'

export default {
  name: 'App',
  components: {
    StudentVue,
    SchoolVue
  },
  methods: {
    getSchoolName(schoolName) {
      console.log(schoolName)
    },
    getSchoolAddress(address) {
      console.log(address)
    },
    getStudentName(studentName) {
      console.log(studentName)
    },
    getStudentAge(age) {
      console.log(age)
    },
    studentVCclick(){
      console.log("学生组件被点击了")
    }

  },
  mounted() {
    setTimeout(() => {
      this.$refs.s2.$on('getAddress', this.getSchoolAddress)
    }, 4000);

    this.$refs.stu1.$on('getStudentName',this.getStudentName)
    this.$refs.stu1.$on('getStudentAge',this.getStudentAge)

  }
}
</script>

<style scoped>
#s1 {
  background-color: darkcyan;
}

#s2 {
  background-color: brown;
}

#stu1 {
  background-color: coral;
}
</style>